<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
语法:
    1.注册过滤器: Vue.filter(name,callback) 或 new Vue{filters:0}
    2.使用过滤器: {{ xxx过滤器名]] 或 v-bind:属性 =“xxx过滤器名"
备注:
    1.过滤器也可以接收额外参数、多个过滤器也可以串联
    2.并没有改变原本的数据，是产生新的对应的数据
-->
<div id="app">
    <h1>过滤器</h1>
    <p>{{message | dealWithMessage}}</p>
    <p>{{date | dealWithDate}}</p>
    <p>{{message | dealWithMessage | dealWithMessagetoUpperCase}}</p>

</div>
<script src="../JavaScript/vue.js"></script>
<script>
    //全局过滤器
    Vue.filter("dealWithDate", function (val) {
        console.log(this)
        return "现在是" + val
    })
    const vm = new Vue({
        el: "#app",
        data: {
            message: "Vue",
            date: "2023.5.22"
        },
        //局部过滤器
        filters: {
            dealWithMessage(value) {
                console.log(this)
                return value + "React" + "Angular"
            },
            dealWithMessagetoUpperCase(val){
                return val.toUpperCase()
            }
        }
    })
</script>
</body>
</html>
